<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <!-- v-if：条件判断**

        条件成立则显示，否则不显示
        条件如果不满足，标签不会创建 -->
    <div id="app">
        <p v-if="isMan">男士列表</p>
        <p v-if="!isMan">女士列表</p>
        <!-- v-else：否则**

            条件不成立显示，成立则不显示
            v-else与 v-if搭配使用，而且不要绑定任何数据
        -->
        <p v-if="OK">条件成立</p>
        <p v-else>条件不成立</p>
        <h1>条件成立时才能看到</h1>
        <p>如果不成立则什么都看不到</p>
        <!-- v-show**

            v-show也可以根据条件是否成立来判断是否显示元素
            不管条件是否成立标签都会创建，如果不成立设置display:none 隐藏标签 -->
        <p v-if="isMan" id="if">content</p>
        <p v-show="isMan" id="show">content</p><br>
        <button @Click="change()">改变isMan 的值</button>

        <!-- **使用场景**

                基于以上区别，因此，如果需要非常频繁地切换，则使用 v-show 较好；
                如果在运行时条件很少改变，则使用 v-if 较好。
            
                v-if判断是否加载，可以减轻服务器的压力，
                在需要时加载,但有更高的切换开销;

                v-show调整DOM元素的CSS的dispaly属性，
                可以使客户端操作更加流畅，但有更高的初始渲染开销。

                如果需要非常频繁地切换，则使用 v-show 较好；
                如果在运行时条件很少改变，则使用 v-if 较好。
            
            -->

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isMan: true,
                OK: false
            },
            methods: {
                change: function() {
                    this.isMan = this.isMan ? false : true;
                    this.OK = this.OK ? false : true;
                }
            },
        })
    </script>
</body>

</html>